<template>
  <div class="wrapper">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in mdv" :key="index">
        <img :src="item.photo" alt="" />
        <div class="banner-inner">
          <div class="banner-inner-box">
            <div class="title-box">{{ item.title }}</div>
            <div class="content-box">{{ item.introduction }}</div>
            <div class="toSeeDetail" @click="toSeeDetail(item)">
              <el-button class="toSeeDetail" type="primary">点击查看</el-button>
            </div>
          </div>
        </div>
      </swiper-slide>
      <!-- 根据情况引入控件 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "swiper-page",
  data() {
    return {
      swiperOption: {
        spaceBetween: 15, // 图片之间的间距
        centeredSlides: true, // 居中还是从图1开始
        slidesPerView: "auto", // 一屏幕显示几个? 数字或者默认  auto 自动。
        notNextTick: true, // true:加载后允许触发事件 false:加载后不可以触发事件
        loop: true, // 循环吗
        initialSlide: 0, // 从第几个开始
        autoplay: {
          delay: 5000, // 等5秒下一个
          disableOnInteraction: false, // 中间滑动一下，取消自动吗？
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        }, // 下按钮
        speed: 800, // 滑动时候动画的速度
        paginationClickable: false, // 下面按钮让点吗
        navigation: {
          prevEl: ".swiper-button-prev", // 左侧按钮
          nextEl: ".swiper-button-next", // 右侧按钮
        },
        effect: "fade", // 渐入效果
        watchSlidesProgress: true, // 开启这个参数来计算每个slide的progress
        watchSlidesVisibility: true, // 先要开启watchSlidesProgress参数，如果开启watchSlidesVisibility，则会在每个slide增加一个指示该slide的progress值得classname
        autoHeight: true  // 图片高度自适应
      },
      mdv: [
        {
          'photo':'https://pic3.zhimg.com/v2-58d652598269710fa67ec8d1c88d8f03_r.jpg',
          'title':'山峰',
          'introduction':'111111111111111111111111111111111111'
        },
        {
          'photo':'https://upfile2.asqql.com/upfile/hdimg/wmtp/wmtp/2015-12/30/9835VicmIhquvD.jpg',
          'title':'湖泊',
          'introduction':'2222222222222222222222222222222222222'
        },
        {
          'photo':'https://uploadfile.bizhizu.cn/up/74/d9/0d/74d90d8cfb6500f350f6c19e3032f8b7.jpg',
          'title':'草原',
          'introduction':'33333333333333333333333333333333333'
        },
      ], // 存放图片数据的数组
    };
  },
};
</script>

<style lang="scss" scoped>
.wrapper{
  max-width:100vw;
  max-height:100vh;
}
@keyframes blurFadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.swiper-slide {
  width: 100%;
  height: 579px;
  img {
    width: 100%;
    min-height: 310px;
    transform: scale(1);
    transition: ease all 1.8s;
    object-fit: cover;
  }
}
.swiper-slide-visible {
  img {
    transform: scale(1.2);
    transition: ease all 1.8s;
  }
  .banner-inner {
    .title-box {
      color: #333333;
      font-weight: 600;
      font-size: 36px;
      margin-top: 125px;
      margin-bottom: 23px;
      animation: blurFadeIn 0.4s backwards;
      animation-delay: 0.8s;
    }
    .content-box {
      color: #666666;
      font-size: 24px;
      margin-bottom: 45px;
      animation: blurFadeIn 0.6s backwards;
      animation-delay: 1s;
    }
    .toSeeDetail {
      width: 152px;
      font-size: 16px;
      height: 40px;
      animation: blurFadeIn 0.8s backwards;
      animation-delay: 1.2s;
    }
  }
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 115px;
  left: 0;
  width: 100%;
}
</style>
